<template>
    <div>
      <div>
        <button @click="toDel(obj.id)">-</button>
        <span class="span4">{{ obj.num }}</span>
        <button @click="toAdd(obj.id)">+</button>
      </div>
      <td colspan="3">
          <div class="div1">
          <div class="div2">预计到手<span>{{ totalPrice }}</span></div>
          <button :class="totalPrice === 0 ? 'color1' : 'color2'">{{ totalPrice === 0 ? '不可结算' : '去结算' }}</button>
         </div>
       </td>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
          }
      },
      methods:{
      toDel(id){
        this.objList.forEach(obj => {
          if(obj.id === id){
            if(obj.num > 1){
              obj.num -= 1
            }else{
              let tarInd = this.objList.findIndex(obj => obj.id === id)
              tarInd !== -1 ? this.objList.splice(tarInd,1) : ''
            }
          }
        })
      },
      toAdd(id){
        this.objList.forEach(obj =>  {obj.id === id ? obj.num += 1 : '' })
      }
    }
  }
  </script>
  
  <style>
  .span4{
    margin: 0 7px;
    color:#0921a2 ;
  }
  .div1{
    display: flex;
    align-items: center;
    width: 400px;
    height: 80px;
    margin-left: 10px;
    border-radius: 40px;
    background-color: #f6efef8d;
  }
  .div2{
    width: 350px;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
  }
  .div2 span{
    margin-left: 5px;
    color: red;
  }
  .div1 button{
    width: 110px;
    height: 80px;
    font-size: 20px;
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
  }
  .color1{
    color: #fff;
    background-color: #9999;
  }
  .color2{
    color: #fff;
    background-color: #0921a2;
  }
  </style>